<template>
    <div id="root">
        <canvas ref="chartElement" width="1200" height="500"></canvas>
    </div>
</template>

<script>
    import { onMounted, ref } from "vue";
    import "/src/assets/Chart.min";

    export default {
        setup() {
            const chartElement = ref(null);
            onMounted(() => {
                new Chart(chartElement.value.getContext("2d"), {
                    type: "line",
                    data: {
                        labels: ["9-1", "9-2", "9-3", "9-4", "9-5", "9-6"],
                        datasets: [
                            {
                                data: [12, 13, 15, 7, 9, 11],
                                backgroundColor: [
                                    "rgba(255, 255, 255, 0.2)",
                                    "rgba(54, 162, 235, 0.2)",
                                    "rgba(255, 206, 86, 0.2)",
                                    "rgba(75, 192, 192, 0.2)",
                                    "rgba(153, 102, 255, 0.2)",
                                    "rgba(255, 159, 64, 0.2)",
                                ],
                                borderColor: [
                                    "rgba(255,99,132,1)",
                                    "rgba(54, 162, 235, 1)",
                                    "rgba(255, 206, 86, 1)",
                                    "rgba(75, 192, 192, 1)",
                                    "rgba(153, 102, 255, 1)",
                                    "rgba(255, 159, 64, 1)",
                                ],
                                borderWidth: 1,
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: {
                            display: false,
                            labels: {
                                fontColor: "#fff",
                            },
                        },
                        title: {
                            display: true,
                            fontColor: "#fff",
                            fontSize: "18",
                            text: "7日访客记录",
                        },

                        scales: {
                            yAxes: [
                                {
                                    gridLines: {
                                        display: true,
                                        color: "#ccc",
                                    },
                                    ticks: {
                                        fontColor: "#fff",
                                        beginAtZero: true,
                                    },
                                },
                            ],
                            xAxes: [
                                {
                                    gridLines: {
                                        display: true,
                                        color: "#ccc",
                                    },
                                    ticks: {
                                        fontColor: "#fff",
                                    },
                                },
                            ],
                        },
                    },
                });
            });

            return { chartElement };
        },
    };
</script>

<style lang="scss">
    #root {
        padding: 30px;
    }
</style>
